<template>
  <view>
    <tabs :tabs="tabs" @myEven="changesIndex">

      <view class="order_main">
        <view v-for="item,index in orders" :key="index" class="order_item">

          <view class="order_no_row">
            <view class="order_no_text">订单编号</view>
            <view class="order_no_value">{{item.order_number}}</view>
          </view>
          <view class="order_price_row">
            <view class="order_price_text">订单价格</view>
            <view class="order_price_value">￥{{item.order_price}}</view>
          </view>
          <view class="order_time_row">
            <view class="order_time_text">订单日期</view>
            <view class="order_time_value">{{item.create_time}}</view>
          </view>

        </view>
      </view>
    </tabs>
  </view>
</template>

<script>
import tabs from "../../components/Tabs/Tabs.vue";
import request from "../../utils/request.js";
import { fakeDate } from "../../utils/Falsedata";
import { dateFormat } from "../../utils/asyncWX";
export default {
  components: {
    tabs,
  },
  data() {
    return {
      orders: [],
      tabs: [
        {
          id: 0,
          value: "全部",
          isActive: true,
        },
        {
          id: 1,
          value: "代付款",
          isActive: false,
        },
        {
          id: 2,
          value: "代发货",
          isActive: false,
        },
        {
          id: 3,
          value: "退款/退货",
          isActive: false,
        },
      ],
    };
  },
  onShow() {
    // 获取页面栈
    let allPages = getCurrentPages();
    let lastPages = allPages.length - 1;
    let type = allPages[lastPages].options.type; // 获得上个页面传递的参数；

    console.log(type, "type");
    this.getOrders(type);
    this.changeTitleByIndex(type - 1);
  },
  methods: {
    changesIndex(e) {
      console.log(e, "e");
      this.changeTitleByIndex(e);
      this.getOrders(e + 1);
    },
    changeTitleByIndex(e) {
      this.tabs.forEach((item, i) =>
        i === e ? (item.isActive = true) : (item.isActive = false)
      );
    },
    async getOrders(type) {
      const res = await request("/my/orders/all", { type });
      if (!res.message) {
        console.log("111");
        let res = fakeDate.message.orders;
        this.orders = res;
        res.map((item) => {
          item.create_time = dateFormat("YYYY-mm-dd HH:MM", item.create_time);
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.order_main {
  .order_item {
    padding: 20rpx;
    border-bottom: 1rpx solid #ccc;
    color: #666;
    .order_no_row {
      display: flex;
      padding: 10rpx 0;
      justify-content: space-between;
      .order_no_text {
      }

      .order_no_value {
      }
    }

    .order_price_row {
      display: flex;
      padding: 10rpx 0;
      justify-content: space-between;
      .order_price_text {
      }

      .order_price_value {
        color: #f95314;
        font-size: 32rpx;
      }
    }

    .order_time_row {
      display: flex;
      padding: 10rpx 0;
      justify-content: space-between;
      .order_time_text {
      }

      .order_time_value {
      }
    }
  }
}
</style>
